<template>
  <div class="container">
    <h1>个人信息</h1>
    <hr />
    <a-form @submit="handleSubmit()">
      <a-form-item
        field="name"
        tooltip="Please enter username"
        label="用户姓名"
      >
        <a-input v-model="form.userAccount" size="small" />
      </a-form-item>
      <a-form-item
        field="name"
        tooltip="Please enter username"
        label="用户头像"
      >
        <a-space direction="vertical" :style="{ width: '100%' }">
          <a-upload
            list-type="picture"
            action="http://localhost:8121/api/file/upload"
            response-url-key="http://localhost:8121/api/images/1.jpg"
            @success="onSuccess"
            @progress="onProgress"
            :with-credentials="true"
            :show-file-list="false"
            :fileList="file ? [file] : []"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  file && file.status === 'error'
                    ? ' arco-upload-list-item-error'
                    : ''
                }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                      position: 'absolute',
                      left: '50%',
                      top: '50%',
                      transform: 'translateX(-50%) translateY(-50%)',
                    }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                    <div style="margin-top: 10px; font-weight: 600">
                      上传头像
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
          <a-alert>上传完头像别忘了点击修改哦~~</a-alert>
        </a-space>
      </a-form-item>

      <a-form-item
        field="name"
        tooltip="Please enter username"
        label="用户简介"
      >
        <a-textarea
          v-model="form.userProfile"
          :max-length="200"
          allow-clear
          show-word-limit
        />
      </a-form-item>

      <a-form-item>
        <a-button html-type="submit" type="primary" size="large">修改</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { onMounted, ref } from "vue";
import { FileItem } from "@arco-design/web-vue";
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
import message from "@arco-design/web-vue/es/message";
import { UserControllerService, UserUpdateMyRequest } from "../../../generated";

const store = useStore();
const form = ref({} as UserUpdateMyRequest);
const file = ref();

//
const loads = () => {
  form.value = store.state.user.loginUser;
  if (form.value.userAvatar !== null) {
    file.value = {
      url: form.value.userAvatar,
    };
  }
};

onMounted(() => {
  loads();
});
const onSuccess = (res: any) => {
  if (res.response.code === 0) {
    message.success("头像上传成功");
    form.value.userAvatar = res.response.data;
  } else {
    message.error("上传失败" + res.response.message);
  }
};
const onProgress = (currentFile: FileItem) => {
  file.value = currentFile;
};

const handleSubmit = async () => {
  const res = await UserControllerService.updateMyUserUsingPost(
    form.value as UserUpdateMyRequest
  );
  if (res.code === 0) {
    message.success("修改成功");
    store.dispatch("user/getLoginUser");
  } else {
    message.error("修改失败" + res.message);
  }
};
</script>

<style scoped>
.container {
  background-color: antiquewhite;
  height: 60vh;
  margin-top: 15vh;
}
.message {
  margin: 3vh auto;
}
#upImage {
  display: none;
}
.my-up {
  margin-top: 1vh;
}
.btn-message {
  display: inline-block;
  height: 7vh;
  color: rebeccapurple;
  font-size: 1vw;
  line-height: 7vh;
}
</style>
